@charset "utf-8";
/* CSS Document */
* {box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;margin:0; padding:0;}

html {font-family:Tahoma,arial,heltevica,sans-serif;font-size:62.5%;}

body {background:#F7F7F7;box-sizing:border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;-o-box-sizing: border-box;font-size:1.6em;line-height:110%;}
em {font-style: normal;}
h3, h2 {font-size:30px;text-align:center;line-height:200%;}
h3 {font-size: 26px;font-weight:normal;line-height:200%;text-align:center;/*text-shadow:0.1em 0.1em 0.1em #808080;*/}
input[type="button"] {cursor:pointer;}


.card .label {font-size:16px;float:none;}
.card {text-align: right;}
.username, .card .label {font-size:1em;}
.username {color:#3B5998;}
.username:after {content:'|';padding:0.2em;}


a {color:black;/*text-decoration:none;/*text-shadow:0.1em 0.1em 0.1em #808080;*/}
a:hover {color:#1171d8;}
em {padding:0 6px;color: #3B5998;font-weight: bolder;}

/********* FORMS *************/
form {width:600px;/*25%*/margin:0 auto;background:#eee;}
form,table {		
		box-shadow:0.2em 0.2em 0.2em rgba(0, 0, 0, 0.3);
		-moz-box-shadow:0.2em 0.2em 0.2em rgba(0, 0, 0, 0.3);
		-webkit-box-shadow:0.2em 0.2em 0.2em rgba(0, 0, 0, 0.3);
		padding:12px;
		-webkit-border-radius:4px;
		-moz-border-radius:4px;
		border-radius:4px;
}
table {padding:0;}
table button {width:22px;height:22px;}

/********* BOTONES********/
.delete {background: url('images/delete.png') top left no-repeat;border: 0;float: left;width: 22px;}
.edit {background: url('images/edit.png') no-repeat;width: 22px;height: 22px;float: left;border:0;margin-right:10px;}
.add {background: url('images/mas.png') top left no-repeat;width:32px;height:30px;border:0;text-indent:30px;line-height: 178%;border:0;}
.add:hover {background:url('images/mas.png') bottom left no-repeat #276CB9;border:1px solid #eee;box-shadow:0.1em 0.1em 0.1em #eee;color:white;}
.cerrar {background: url('images/cerrar.png') top left no-repeat;width: 25px;height: 26px;float: left;border:0;margin-bottom:10px;border-bottom:2px solid #b03939;cursor:pointer;}

.row {display:inline-block;width:100%;}
label, .label {width:40%;float:left;}
table {/*border-spacing:0;*/width: 100%;}
table td {padding:4px;color:#333;border: 1px solid #ddd;}
table thead {background:#dfdfdf;}
table thead td {padding:12px;font-weight: bolder;border-color:#eee;}
table td a {text-shadow:0 0 0;}
tbody .headerCol:nth-child(1) {background:aliceblue;}
tbody .headerCol:nth-child(2), tbody .headerCol:nth-child(3)  {background:#ddd;}
/*tbody .headerCol td {color:#3B5998;}*/
tbody .headerCol:first-child td input:hover {background:url('images/mas.png') bottom left #276CB9;color:white;box-shadow:0.1em 0.1em 0.1em #357ae8;}
tbody tr:hover #botones > input, tbody tr:hover #botones > button {opacity:1;}
tbody tr #botones > input,tbody tr #botones > button {opacity:0.3;}

/********* FORMULARIOS DE USUARIO *****/
/********* REGISTRO de USUARIO *****/
#security_check,.card.login {width:370px;}
form#registroForm {width:600px;}
form#registroForm label {width:28%;}
form#registroForm input[type="text"] {width:50%;}
form#registroForm input[type="password"] {width:28%;}
form#registroForm input.hasDatepicker, form#registroForm input#telefonoInput {width:auto;}


.field {float:left;width:60%;}
input {
	background-color: #fff;
	border: 1px solid #ccc;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
		-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
		-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);

		-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
		-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
		-o-transition: border linear 0.2s, box-shadow linear 0.2s;
		transition: border linear 0.2s, box-shadow linear 0.2s;
	display: inline-block;
	height: 26px;
	padding: 0 6px;
	margin-bottom:0.5em;
	font-size: 14px;
	line-height: 20px;
	color: #555555;
	vertical-align: middle;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	width:100%;
}

input:focus {border-color:rgba(82, 168, 236, 0.6);outline:0;}
input[type="submit"] {background:black;border:1px solid whitesmoke;box-shadow: 1px 1px 1px #2d2d2d;line-height:100%;float:right;cursor:pointer;color:white;}
input[type="submit"]:hover, input[type="submit"]:focus {background:rgba(82, 168, 236, 0.8);color:black;} 


table.admin_panel {width:46%;margin:0 auto;background:#fff;}

.Post-it {background: #bbF111;
		line-height: 180%;
		width: 19%;
		padding: 2%;
		box-shadow: 3px 4px 4px black;
		border: 1px solid whitesmoke;
		margin:2% auto;
		height:214px;
		padding-top: 2%;
}
.Post-it:after {content: ':-)';width:100%;float:right;}

/******** GESTION DE LISTAS ********/
/******** Añadir Lista********/
.panel_user.lista {width:750px;margin:0 auto;}

/****************************************/
/******** Añadir Producto / Amigo********/
div.headerCol, .card.panel_user, .tabs, .container {width:750px;text-align:left;color:#275CB9;display:block;clear:both;}

.card.panel_user {padding:0.2em;background:none;}
.card.panel_user label {width:auto;padding-right: 1em;line-height:180%;cursor:pointer;}
.card.panel_user input {width:180px;}


.tabs {display:block;margin:0 auto;clear:both;}
.tabs label {cursor:pointer;width:100%;}
.tab {float:left;width: 50%;border-right: 1px solid #276CB9;text-align: center;border: 1px solid #d5d5d5;border-radius: 0 5px 0 0;line-height:2;background:aliceblue;}
.tab.active {background:#275CB9; color:white;}

.container {margin:0 auto;}
.container input.add {background:url('images/mas.png') bottom left no-repeat gray;}
.container#contenedor-amigos input.add {float:none;}

/***** Amigos******/
.container#contenedor-amigos {margin:0 auto;}
.container#contenedor-amigos form {width:auto;background:none;box-shadow: 0 0 0;}
.container#contenedor-amigos tbody .headerCol:nth-child(2) td {text-align:center;}

.container#contenedor-amigos tbody .headerCol.fields td:nth-child(1) {width: 250px;} /**email**/
.container#contenedor-amigos tbody .headerCol.fields td:nth-child(2) {width: 250px;} /**nombre**/
.container#contenedor-amigos tbody .headerCol.fields td:nth-child(3) {width: 50px;} /**acción**/
.container#contenedor-amigos tbody tr[id^='tr'] #eliminarAmigo > input {opacity:0.3;}
.container#contenedor-amigos tbody tr[id^='tr']:hover #eliminarAmigo> input {opacity:1;}

.panel_user {width:100%;background:white;}
.panel_user thead {background:#eee;}

.popup {z-index:9;position:absolute;top:0;left:0;width:100%;background:rgba(0,0,0,0.8);height: 100%;}
.popup form {z-index: 10;position:relative;top:21%;margin:0 auto;width:300px;padding:0.5em;}

/********* ERRORES *********/
.errorblock {border:0.1em solid #D22200;}
.error {color:#D22200;font-size:0.7em;line-height:100%;display:block;float:left;margin-left:28%;margin-bottom:0.5em;}
.error:before {content:'*';}
.errorblock {color: #000;background-color:#ffEEEE;border:0.1em solid #ff0000;padding:0.8em;margin:0 auto;width:300px;}
		

/********* BLOCK *********/

.card .label {width:auto;}
.card, .pagination {width:750px;margin:0 auto;padding:0.8em;}
.card .action {float:right;}